<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="assets/css/reset-min.css" rel="stylesheet" type="text/css" /> 
        <link href="assets/css/popup.css" rel="stylesheet" type="text/css" /> 
    </head>
    <body>
        <div id="page">
            <div id="content" style="visibility:hidden;">
                <div>
                    <ul class="tweets" id="metrist:friends" ref="friends">
                        <!--
                        <li id="234" screen_name="feelinglucky" tweets_text="item.text">
                            <h4 class="nick"><a href="#">明城</a></h4>
                            <p class="time">12h</p>
                            <p class="avatar"><img src="assets/images/avatar.png" /></p>
                            <p class="message">RT <a href="#">@feelinglucky</a>: 腾讯 TM 测试版的“锁定”功能非常棒</p>
                            <p class="act"><a href="#" act="Retweet">Retweet</a><a href="#" act="Reply">Reply</a></p>
                        </li>
                        <li class="reply">
                            <h4 class="nick"><a href="#">明城</a></h4>
                            <p class="time">12h</p>
                            <p class="avatar"><img src="assets/images/avatar.png" /></p>
                            <p class="message">RT <a href="#">@feelinglucky</a>: 腾讯 TM 测试版的“锁定”功能非常棒</p>
                            <p class="act"><a href="#" act="Retweet">Retweet</a><a href="#" act="Reply">Reply</a></p>
                        </li>
                        <li class="direct">
                            <h4 class="nick"><a href="#">明城</a></h4>
                            <p class="time">12h</p>
                            <p class="avatar"><img src="assets/images/avatar.png" /></p>
                            <p class="message">RT <a href="#">@feelinglucky</a>: 腾讯 TM 测试版的“锁定”功能非常棒</p>
                            <p class="act"><a href="#" act="Retweet">Retweet</a><a href="#" act="Reply">Reply</a></p>
                        </li>
                        <li class="me">
                            <h4 class="nick"><a href="#">明城</a></h4>
                            <p class="time">12h</p>
                            <p class="avatar"><img src="assets/images/avatar.png" /></p>
                            <p class="message">RT <a href="#">@feelinglucky</a>: 腾讯 TM 测试版的“锁定”功能非常棒</p>
                            <p class="act"><a href="#" act="Retweet">Retweet</a><a href="#" act="Reply">Reply</a></p>
                        </li>
                        -->
                    </ul>
                    <ul class="tweets" id="metrist:replies" ref="replies">
                        <!--
                        <li class="reply">
                            <h4 class="nick"><a href="#">明城</a></h4>
                            <p class="time">12h</p>
                            <p class="avatar"><img src="assets/images/avatar.png" /></p>
                            <p class="message">RT <a href="#">@feelinglucky</a>: 腾讯 TM 测试版的“锁定”功能非常棒</p>
                            <p class="act"><a href="#" act="Retweet">Retweet</a><a href="#" act="Reply">Reply</a></p>
                        </li>
                        -->
                    </ul>

                    <ul class="tweets" id="metrist:directs" ref="directs">
                        <!--
                        <li class="direct">
                            <h4 class="nick"><a href="#">明城</a></h4>
                            <p class="time">12h</p>
                            <p class="avatar"><img src="assets/images/avatar.png" /></p>
                            <p class="message">RT <a href="#">@feelinglucky</a>: 腾讯 TM 测试版的“锁定”功能非常棒</p>
                            <p class="act"><a href="#" act="Retweet">Retweet</a><a href="#" act="Reply">Reply</a></p>
                        </li>
                        -->
                    </ul>
                    <ul class="console" id="metrist:console">
                        <!--
                        <li class="error">this is error!</li>
                        <li class="warn">this is warn</li>
                        <li class="log">this is log</li>
                        -->
                    </ul>
                </div>
            </div>
            <div id="form">
                <form action="#" method="post" id="metrist:form">
                    <div id="tweet">
                        <textarea id="form:input"></textarea>
                        <span id="form:status">140</span>
                        <button type="submit" id="metrist:submit">&#187;</button>
                    </div>
                </form>
            </div>
            <ul id="channel">
                <li class="selected">Friends</li>
                <li>Replies</li>
                <li>Directs</li>
                <li id="channelConsole" class="hidden">Console</li>
            </ul>
            <a id="refresh" title="Refresh"><img src="assets/images/reload.png" width="16" height="16" /></a>
        </div>
        <div id="loading" class="loading-min hidden"></div>
        <div id="notice" class="hidden"><span></span></div>
        <script type="text/javascript" src="assets/yui-special/yahoo.js"></script>
        <script type="text/javascript" src="assets/yui-special/dom.js"></script>
        <script type="text/javascript" src="assets/yui-special/event.js"></script>
        <script type="text/javascript" src="assets/yui-special/animation.js"></script>
        <script type="text/javascript" src="assets/yui-special/connection_core.js"></script>
        <script type="text/javascript" src="assets/scripts/common.js"></script>
        <script type="text/javascript" src="assets/scripts/ui.js"></script>
        <script type="text/javascript">
            (function() {
                var Util = YAHOO.util, Dom = Util.Dom, Event = Util.Event, Lang = YAHOO.lang;

                var Tweets = (function() {
                    var backgroundPage = chrome.extension.getBackgroundPage();
                    var Server = backgroundPage.Server;
                    return {
                        update: function() {
                            UI.Loading.showMini();
                            backgroundPage.Twitter.update(UI.InputArea.getValue(), {
                                onSuccess: function(o) {
                                    UI.InputArea.setValue('', true);
                                    UI.InputArea.check();
                                    UI.Loading.hideMini(function() {
                                        var t = backgroundPage.Tweets, channel = 'friends', tmp = [];
                                        tmp.push(JSON.parse(o.responseText));
                                        t.addToList(channel, tmp);
                                        UI.Rebuild.channel(channel, t.getList(channel));
                                        UI.Notice.show('Update tweets successful');
                                        console.info('Update tweets successful')
                                    });
                                },
                                onError: function() {
                                    UI.Loading.hide();
                                    UI.Notice.show('Update tweets error');
                                    console.info('Update tweets error')
                                }
                            });
                        },

                        getData: function(name) {
                            return backgroundPage.Tweets.getList(name);
                        },

                        isRequesting: function() {
                            return Server.status().requesting;
                        },

                        clearUnreadNum: function() {
                            Lang.later(2000, window, function() {
                                backgroundPage.Tweets.clearUnreadNum();
                                setBadgeText('');
                            });
                        },
                        Server: Server
                    };
                })();


                var TweetsTextAreaEl = Dom.get('form:input'), TweetsUpdateBtnEl = Dom.get('metrist:submit'),
                    TweetsUpdateFormEl = Dom.get('metrist:form');

                Event.on(TweetsUpdateFormEl, 'submit', function(e) {
                    Event.stopEvent(e);
                    if (UI.InputArea.check()) {
                        Tweets.update();
                    }
                });

                Event.on(TweetsTextAreaEl, 'keyup', function(e){
                    var e = Event.getEvent(e);
                    if (e.ctrlKey && e.keyCode == 13) {
                        Event.stopEvent(e);
                        Tweets.update();
                    }
                });

                UI.Channel.setSwitchToCall(function() {
                    var current = UI.Channel.getCurrentIdx(), 
                        container = UI.Channel.containers[current];
                    var loaded = Dom.getAttribute(container, 'loaded'),
                        ref = Dom.getAttribute(container, 'ref');
                    if (loaded != 'loaded' && ref) {
                        Dom.setAttribute(container, 'loaded', 'loaded');
                        try {
                            UI.Rebuild.channel(ref, Tweets.getData(ref));
                        } catch (e) {
                            console.error('UI.Rebuild.channel: build ['+ ref +'] error');
                        }
                    }
                });
                var defaultIdx = 0;

                Dom.setStyle('content', 'visibility', 'hidden');
                UI.Loading.show(function() {
                    var foo = Lang.later(50, window, function() {
                        if (!Tweets.isRequesting()) {
                            foo.cancel();
                            UI.Loading.hide(function() {
                                Dom.setStyle('content', 'visibility', '');
                                Tweets.clearUnreadNum(); // clear unread
                                UI.Channel.switchTo(defaultIdx, false); // Hallelujah!!!
                                Lang.later(500, window, function() { UI.InputArea.check(); }, null, true); 
                            }, false);
                        }
                    }, null, true);
                });

                // 刷新事件
                var foo = null, refreshEvent = function(e) {
                    if (!Lang.isUndefined(e)) { Event.stopEvent(e); }
                    UI.Loading.show(function() {
                        if (foo){ foo.cancel(); };
                        Tweets.Server.restart();
                        foo = Lang.later(50, window, function() {
                            if (!Tweets.isRequesting()) {
                                foo.cancel();
                                UI.Loading.hide(function(){
                                    UI.Rebuild.all([
                                        { name: 'friends', data: Tweets.getData('friends')},
                                        { name: 'replies', data: Tweets.getData('replies')},
                                        { name: 'directs', data: Tweets.getData('directs')}
                                    ]);
                                });
                            };
                        }, null, true);
                    });
                };
                Event.on('refresh', 'click', refreshEvent);
                var minutes = parseInt(getConf('conf_per_request_time', 10), 10);
                Lang.later(minutes * 60 * 1000, UI, refreshEvent, null, true);

                // 界面点击事件
                Event.on('content', 'click', function(e) {
                    var target = Event.getTarget(e);
                    if (target.nodeName.toLowerCase() == 'a') {
                        Event.stopEvent(e);
                        var act = (Dom.getAttribute(target, 'act') || '').toLowerCase();
                        if (act) {
                            switch (act) {
                                case 'reply': 
                                    var ancestor = Dom.getAncestorByTagName(target, 'li');
                                    if (ancestor) {
                                        var prefix = Dom.hasClass(ancestor, 'direct') ? 'd ' : '@';
                                        var value = prefix + Dom.getAttribute(ancestor, 'screen_name');
                                        if (prefix == '@') {
                                            value = UI.InputArea.getValue() + ' ' + value + ' ';
                                        }
                                        UI.InputArea.setValue(value, true, false);
                                        UI.InputArea.check();
                                        UI.InputArea.focus();
                                    }
                                break;

                                case 'retweet':
                                    var ancestor = Dom.getAncestorByTagName(target, 'li');
                                    if (ancestor) {
                                        var value = 'RT @' + 
                                            Dom.getAttribute(ancestor, 'screen_name') + ': '
                                                + Dom.getAttribute(ancestor, 'tweets_text');
                                        UI.InputArea.setValue(value, true, false);
                                        UI.InputArea.check();
                                        UI.InputArea.focus();
                                    }
                                break;

                                default: return;
                            }
                         } else {
                            var href = Dom.getAttribute(target, 'href') || '';
                            if (/^(http|https):\/\//.test(href)) {
                                chrome.tabs.create({url: href});
                            }
                         }
                    }
                });
             })();
        </script>
    </body>
</html>
